<template>
  <div id="app">
    <!-- <img src="src/assets/img/footer_1.png" alt=""> -->
    <div class="top">
      <header class="header">
      <div class="centent">
          <div class="left">
            <img src="src/assets/img/ditu.png">
            <h3>海淀区北京艺术传媒</h3>
            <img src="src/assets/img/san.png">
            </div>
          <div class="right">
            <div class="tianqi">
              <span>-1°</span>
              <span>晴天</span>
            </div>
            <img src="//fuss10.elemecdn.com/9/b9/c8e482821be2080edcffbb3a8d376png.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/">
          </div>
      </div>
    </header>
    <!--  -->
    <div :class="scroll" id="search">
      <input type="text" placeholder="输入商家、商品名称">
    </div>
    <!--  -->
     <div :class="swiper" id="swiper_nav">
     <swiper :options="swiperOption" ref="mySwiper" class="swiper">
        <swiper-slide v-for="(v,i) in slide" :key="i" class="slide">{{v.text}}</swiper-slide>
      </swiper>
      </div>

      </div>
      <!--  -->

       <swiper :options="swiperOption1" ref="mySwiper" class="swiper1">
        <swiper-slide class="slide1">
          <figure v-for="(v,i) in slide1" :key="i">
            <img :src="v.img">
            <p>{{v.p}}</p>
          </figure>
        </swiper-slide>
        <swiper-slide class="slide1">
           <figure v-for="(v,i) in slide2" :key="i">
            <img :src="v.img">
            <p>{{v.p}}</p>
          </figure>
        </swiper-slide>
        <div class="swiper-pagination dian"  slot="pagination"></div>
      </swiper>
      
      <!--  -->
      <router-link tag="div" to="/New_people" class="Red_envelopes">
        <img src="https://fuss10.elemecdn.com/3/c8/45b2ec2855ed55d90c45bf9b07abbpng.png?imageMogr/format/webp/thumbnail/!710x178r/gravity/Center/crop/710x178/">
      </router-link> 
      <!--  -->
      <div class="List_of_goods">
        <h1>商家推荐</h1>
        
        <router-link tag="figure" to="/list1"  v-for="(v,i) in centent_list" :key="i">
          <div class="left_img">
            <img :src="v.logo">
          </div>
          <div class="content_right">
            <p><span><span>{{v.sp1}}</span><span>{{v.sp2}}</span></span><span class="sp">{{v.sp3}}</span></p>
            <p><span>{{v.sp4}}</span><span>{{v.sp5}}</span></p>
            <div><div><span>{{v.sp6}}</span>|<span>{{v.sp7}}</span></div><div><span>{{v.sp8}}</span> | <span>{{v.sp9}}</span></div></div>
            <p><img :src="v.img"><span>{{v.sp10}}</span></p>
            <p><span>{{v.sp11}}</span><span>{{v.sp12}}</span></p>
            <p><span>{{v.sp13}}</span><span>{{v.sp14}}</span></p>
          </div>
        </router-link>
      </div> 
      <!--  -->
    <div class="kon"></div>
      <!--  -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app',
   data () {
      return {
        slide:[
          {"text":"沙拉"},
          {"text":"麻辣烫"},
          {"text":"粥"},
          {"text":"水果39"},
          {"text":"酸辣粉"},
          {"text":"寿司"},
          {"text":"米线"},
          {"text":"板面"},
          {"text":"麦当劳"},
          {"text":"烤鸭"}
        ],
        slide1:[
          {
            "img":"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"美食"
          },
          {
            "img":"//fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"晚餐"
          },
          {
            "img":"//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"商超便利"
          },
          {
            "img":"//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"果蔬生鲜"
          },
          {
            "img":"//fuss10.elemecdn.com/1/a5/b4aa9dd27ff21d0a76bb0da550fd7jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"炸鸡炸串"
          },
          {
            "img":"//fuss10.elemecdn.com/6/74/785eafaf358fa6b18df37c64c3510jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"大牌5折"
          },
          {
            "img":"//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"甜品饮品"
          },
          {
            "img":"//fuss10.elemecdn.com/b/e1/58aa34ef194d216c9f2328f603588jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"医药保健"
          }
        ],
        slide2:[
          {
            "img":"//fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"浪漫鲜花"
          },
          {
            "img":"//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"麻辣烫"
          },
          {
            "img":"//fuss10.elemecdn.com/7/43/0947110c24c620a767745054d798bjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"地方菜系"
          },
          {
            "img":"//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"披萨一面"
          },
          {
            "img":"//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"新店特惠"
          },
          {
            "img":"//fuss10.elemecdn.com/9/3f/cd951a6dbc7ecc5b12e24e9f8a124jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
            "p":"快餐便当"
          }
        ],
        centent_list:[
            {
              "logo":"//fuss10.elemecdn.com/5/3a/f7ef20c0a95674bc719470faf2a47jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            },
            {
              "logo":"//fuss10.elemecdn.com/9/2a/ac7504b345bac8cbf9772c7ca6d4dpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            },
            {
              "logo":"//fuss10.elemecdn.com/1/b2/717fdb1c13e38bb0400ee74abfebbpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            },
            {
              "logo":"//fuss10.elemecdn.com/a/b3/78e4a7079948628fcf617162a6ff6jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            },
            {
              "logo":"//fuss10.elemecdn.com/e/0f/aff05918896b6d87e748eaabdfa07png.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            },
            {
              "logo":"//fuss10.elemecdn.com/7/8a/b96273f9a25fec9ece40da852a9eapng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            },
            {
              "logo":"//fuss10.elemecdn.com/d/40/1a5e84599a16985eb92b65b739891jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
              "sp1":"品牌",
              "sp2":"DQ冰淇淋（金街店）",
              "sp3":"保",
              "sp4":"4.8 月售36单",
              "sp5":"蜂鸟专送",
              "sp6":"￥20起送",
              "sp7":"配送费￥5元",
              "sp8":"919m",
              "sp9":"23分钟",
              "img":"//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/",
              "sp10":"口碑人气好店",
              "sp11":"首",
               "sp12":"新用户下单立减17元",
              "sp13":"首",
              "sp14":"满30减13 ，满50减20"
              
            }
        ],
        footer:[
          {
            "img":"src/assets/img/footer_1.png",
            "title":"外卖",
            path:"/index"
          },
          {
            "img":"src/assets/img/footer_3.png",
            "title":"发现",
            path:"/find"
          },
          {
            "img":"src/assets/img/footer_2.png",
            "title":"订单",
            path:"/Order"
          },
          {
            "img":"src/assets/img/footer_4.png",
            "title":"我的",
            path:"/My"
          }
        ]
        ,
        swiperOption: {
          slidesPerView : 8,
          pagination: {
            el: '.swiper-pagination',
          }
        },
         swiperOption1: {
          pagination: {
            el: '.swiper-pagination',
          }
        },
        scroll: 'search',
        swiper:'sw'
      }
    },
    mounted() {
   window.addEventListener('scroll', this.menu)
    
  },
    methods:{
      menu() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        var offsetTop = document.querySelector('#search').offsetTop
          if (scrollTop > offsetTop) {
            this.scroll = 'search_1'
            this.swiper='sw1'
          } else {
            this.scroll = 'search'
            this.swiper='sw'
          }
          
      }
    }
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {@{name}: @px / 75 * 1rem;}

.top{
  background: #03a5ff;
}
.header{
width: 100%;
.px2rem(height, 100);
background: #03a5ff;
 display: flex;
 justify-content: center;
 align-items: center;
.centent{
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left{
    display: flex;
    justify-content: space-between;
    align-items: center;
    img:nth-child(1){
      .px2rem(height,40);
      .px2rem(width,30);

    }
    img:nth-child(3){
      .px2rem(height,12);
      .px2rem(width,25);

    }
    h3{
      .px2rem(font-size,32);
      font-weight: bolder;
      color: white;
    }
  }
  .right{
    display: flex;
    align-items: center;
    .tianqi{
      display: flex;
      flex-direction: column;
      
      .px2rem(margin-right,20);
      span{
        color: white;
        text-align: center;
      }
    }
    img{
      .px2rem(height, 60);
      .px2rem(height,60);
    }
  }
}
}
.search{
  z-index: 99;
  width: 100%;
  .px2rem(height, 100);
  background: #03a5ff;
  display: flex;
  justify-content: center;
  align-items: center;
  input{
    width: 90%;
    height: 60%;
    outline: none;
    border: none;
    border-radius:1px; 
    text-align: center;
    color: #999999;
    background: white url(../assets/img/shece.png) no-repeat left 26% center;
    background-size: 20px 20px; 
  }
}
.search_1{
  z-index: 99;
  width: 100%;
  .px2rem(height, 100);
  background: #03a5ff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  input{
    width: 90%;
    height: 60%;
    outline: none;
    border: none;
    border-radius:1px; 
    text-align: center;
    color: #999999;
    background: white url(../assets/img/shece.png) no-repeat left 26% center;
    background-size: 20px 20px; 
  }
  
}
.sw{
  width: 100%;
  background: #03a5ff;
  .px2rem(margin-top,0);
}
.sw1{
    .px2rem(margin-top,100);
     width: 100%;
     background: #03a5ff;
  }
  .swiper{
  width: 92%;
  .px2rem(height, 60);
  background: #03a5ff;
  .px2rem(line-height,60);
  .slide{
    text-align: center;
    color: white;
    .px2rem(font-size,12);
  }
}
.swiper1{
  width: 100%;
  .px2rem(height,300);
}
.dian{
  width: 100%;
  text-align: center;
  margin: -3% 0;
  .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
}

}


.slide1{
  display: flex;
  flex-wrap: wrap;
  figure{
    width: 25%;
    text-align: center;
        img {
            .px2rem(height, 80);
            .px2rem(width, 100);
            margin: 0% 0;
        }
        p {
            .px2rem(font-size, 20);
            color: #707070;
            margin-top: 10%;
        }
  }
}
.Red_envelopes{
  width: 95%;
  margin: 0 auto;
  margin-top: 2%;
  img{
    width: 100%;
  }
}
.List_of_goods{
  width: 100%;
  margin-top: 2%;
  
  h1{
    width: 100%;
    .px2rem(height,40);
    text-align: center; 
    .px2rem(line-height,40);
    background: url(../assets/img/h1_bg.png);
    background-size: 100% 100%;
    .px2rem(font-size,32);
  }
  figure{
    .px2rem(height,280);
    border-bottom: 1px solid #e9e9e9;
     display: flex;
    .left_img{
      .px2rem(width, 130);
      height: 100%;
        img{
          .px2rem(height,130);
          .px2rem(width,130);
          border-top: 1px solid #e9e9e9;
          border-bottom: 1px solid #e9e9e9;
          border-right: 1px solid #e9e9e9;
          .px2rem(margin-top, 20);
          box-sizing: border-box;
        }
    }
    .content_right{
      flex: 1;
      padding-left: 2%;
      p{
        width: 95%
      }
      p:nth-child(1){
        .px2rem(height,70);
        .px2rem(line-height, 70);
        display: flex;
        justify-content: space-between;
        span:nth-child(1){
          span:nth-child(1){
            background: #ffc500;
          }
          span:nth-child(2){
          .px2rem(font-size, 26);
          font-weight: bolder;
        }
        }
      }
      p:nth-child(2){
        display: flex;
        justify-content: space-between;
        .px2rem(height,30);
        .px2rem(line-height, 30);
        span:nth-child(1){
          .px2rem(text-indent,180);
          background: url(../assets/img/ji.png) no-repeat left center;
          background-size: 84px 17px;
          color: #6f6f6f;
        }
        span:nth-child(2){
          background: #03a5ff;
          color: white;
          border-radius: 2px; 
        }
      }
      div:nth-child(3){
        width: 95%;
        display: flex;
        justify-content: space-between;
        .px2rem(height,40);
        .px2rem(line-height, 40);
        span:nth-child(1){
          margin-left: 0;
          margin-right: 2%;
        }
        span{
          color: #666666;
          margin: 0 3%;
        }
      }
      p:nth-child(4){
        .px2rem(height,40);
        .px2rem(line-height, 40);
        border-bottom: 1px  dashed #cccccc;
        display: flex;
        align-items: center;
        img{
          .px2rem(height,20);
        .px2rem(line-height, 20);
        }
        span{
          color: rgb(232, 71, 11);
        }
      }
      p:nth-child(5){
         .px2rem(height,40);
        .px2rem(line-height, 40);
        margin-top: 2%;
        span:nth-child(1){
          color: white;
          background: #70bc46;
          margin-right: 1%;
          border-radius: 2px; 
        }
        span:nth-child(2){
          color: #666666;
        }
      }
      p:nth-child(6){
         .px2rem(height,40);
        .px2rem(line-height, 40);
        span:nth-child(1){
          color: white;
          background: #f07373;
          margin-right: 1%;
          border-radius: 2px; 
        }
        span:nth-child(2){
          color: #666666;
        }
      }
    }
  }
}
.kon{
  .px2rem(height,100 );
}
</style>
